<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 css -->
  <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

  <!-- 引入 js -->
  <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

  <script src="
 https://cdn.jsdelivr.net/npm/layui@2.9.16/dist/layui.min.js
 "></script>
  <link href="
 https://cdn.jsdelivr.net/npm/layui@2.9.16/dist/css/layui.min.css
 " rel="stylesheet">
  <style>
    #editor—wrapper {
      border: 1px solid #ccc;
      z-index: 100;
      /* 按需定义 */
    }

    #toolbar-container {
      border-bottom: 1px solid #ccc;
    }

    #editor-container {
      height: 400px;
    }

    .btnBox {
      text-align: right;
    }

    .submit {
      margin-top: 20px;
      width: 160px;
      height: 130px;
      height: 32px;
      cursor: pointer;
      color: #fff;
      background-color: #79bbff;
      border: #19999f;
      border-color: #79bbff;
    }

    .submit:hover {
      background: #2999ff;
    }

    .layui-form {
      margin-top: 50px;
    }

    .layui-form-label {
      width: 120px;
    }

    .layui-input,
    .layui-textarea {
      width: calc(100% - 100px);
    }

    .adsBtns {
      display: flex;
      justify-content: space-between;
    }

    .adsBtns .layui-form-item {
      width: 20%;
    }
  </style>
</head>

<body>
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">文章分类</label>
      <div class="layui-input-block">
        <select name="articleType" lay-filter="aihao">
          <option value=""></option>
          <option value="auto">Auto</option>
          <option value="finance">Finance</option>
          <option value="health">Health</option>
          <option value="tech">Tech</option>
          <option value="travel">Travel</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">文章标题</label>
      <div class="layui-input-block">
        <input type="text" name="newsTitle" lay-verify="required" placeholder="请输入文章标题" autocomplete="off"
          class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">文章大图</label>
      <div class="layui-input-block">
        <input type="text" name="imgUrl" lay-verify="required" placeholder="请输入文章大图地址（暂只支持网络图片链接）" autocomplete="off"
          class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">SEO文本</label>
      <div class="layui-input-block">
        <input type="text" name="seoText" placeholder="请输入文章SEO文本（非必填）" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">文章小分类</label>
      <div class="layui-input-block">
        <input type="text" name="classfy" placeholder="请输入文章小分类，如若无则不填" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">添加广告按钮</label>
      <div class="layui-input-block">
        <input type="radio" name="ads" value="1" title="是" checked>
        <input type="radio" name="ads" value="0" title="否">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">广告按钮长短</label>
      <div class="layui-input-block">
        <input type="radio" name="adsShort" value="0" title="长" checked>
        <input type="radio" name="adsShort" value="1" title="短">
      </div>
    </div>

    <div class="adsBtns">
      <div class="layui-form-item">
        <label class="layui-form-label">广告按钮1</label>
        <div class="layui-input-block">
          <input type="text" name="adsBtns1"  placeholder="请输入广告按钮文本" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">广告按钮2</label>
        <div class="layui-input-block">
          <input type="text" name="adsBtns2"  placeholder="请输入广告按钮文本" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">广告按钮3</label>
        <div class="layui-input-block">
          <input type="text" name="adsBtns3"  placeholder="请输入广告按钮文本" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">广告按钮4</label>
        <div class="layui-input-block">
          <input type="text" name="adsBtns4"  placeholder="请输入广告按钮文本" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">广告链接</label>
        <div class="layui-input-block">
          <input type="text" name="adsLink" lay-verify="required" value="https://arbinanza.com/cf/click/1"
            placeholder="请输入广告链接" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">文章详情</label>
      <div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <div class="btnBox"><button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </div>
  </form>
  </div>

  <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  <script src="../utils/jquery.js"></script>
  <script type="module">
    import {newsTypeObj} from '../utils/common.js'
    const {createEditor, createToolbar} = window.wangEditor

    const editorConfig = {
      placeholder: 'Type here...',
      onChange(editor) {
        const html = editor.getHtml()
        console.log('editor content', html)
        // 也可以同步到 <textarea>
      }
    }

    const editor = createEditor({
      selector: '#editor-container',
      html: '<p><br></p>',
      config: editorConfig,
      mode: 'default', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
      editor,
      selector: '#toolbar-container',
      config: toolbarConfig,
      mode: 'default', // or 'simple'
    })

    // $(".submit").click(function () {
    //     console.log(editor.getHtml());
    // })

    layui.use(['form', 'laydate', 'util'], function () {
      let form = layui.form;
      let layer = layui.layer;
      let util = layui.util;


      // 提交事件
      form.on('submit(demo1)', function (data) {
        let field = data.field; // 获取表单字段值
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        let dataObj = {

        }
        dataObj.id = newsTypeObj[field.articleType].length
        dataObj.imgUrl = field.imgUrl
        dataObj.newsTitle = field.newsTitle
        dataObj.seoText = field.seoText
        dataObj.newsUrl = `https://onlinexzone.com/category/detail/index.html?type=${field.articleType}&id=${newsTypeObj[field.articleType].length}`
        dataObj.classfy = field.classfy ? field.classfy : field.articleType
        dataObj.content = editor.getHtml()
        dataObj.newArticl = true
        newsTypeObj[field.articleType].push(dataObj)

        fetch("http://127.0.0.1:8080/test", {
          method: "POST", // or 'PUT'
          headers: {
            "Content-Type": "application/json",
          },
          body: '111111',
        })
          .then((response) => response.json())
          .then((data) => {
            console.log("Success:", data);
          })
          .catch((error) => {
            console.error("Error:", error);
          });
        // 此处可执行 Ajax 等操作
        // …
        return false; // 阻止默认 form 跳转
      });

    });
  </script>
  <script>
    let E = window.wangEditor; // 全局变量
  </script>
</body>

</html>